<template>
	<div id="conn" style="width: 100%; height: 950px;">
		<div id="r" style="width: 230px; height: 950px; background-color: #00FFFF; float: left;">
			<el-row class="tac">
				<el-col :span="3">
					<div id="t" style="width: 230px; height: 70px; background-color: brown;">
						<img src="../../build/logo.png" style="width: 230px;height: 70px;" />
					</div>
					<div class="d">
						<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
							<el-menu-item index="1" @click="diancan" >
								<i class="el-icon-fork-spoon"></i>
								<span slot="title">点餐</span>
							</el-menu-item>
							<el-submenu index="2" :disabled="this.user==2||this.user==3">
								<template slot="title">
									<i class="el-icon-data-line"></i>
									<span>营业分析</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="1-1">热销菜品</el-menu-item>
									<el-menu-item index="1-2">营业额分析</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
							<el-submenu index="3" :disabled="this.user==2||this.user==3">
								<template slot="title">
									<i class="el-icon-dish-1"></i>
									<span>菜品管理</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="1-3" @click="addtype">&nbsp;添加菜系</el-menu-item>
									<el-menu-item index="1-4" @click="adddish">&nbsp;上架菜品</el-menu-item>
									<el-menu-item index="1-5" @click="updateprice">&nbsp;更改价格</el-menu-item>
									<el-menu-item index="1-6" @click="updatekc">&nbsp;菜品库存管理</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
							<el-menu-item index="4" @click="table" :disabled="this.user==3">
								<i class="el-icon-hot-water"></i>
								<span slot="title">桌台管理</span>
							</el-menu-item>
							<el-submenu index="5" :disabled="this.user==3">
								<template slot="title">
									<i class="el-icon-cold-drink"></i>
									<span>会员管理</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="1-7" @click="vipadd">注册会员</el-menu-item>
									<el-menu-item index="1-8" @click="vipall">会员信息及修改</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
							<el-submenu index="6" :disabled="this.user==2||this.user==3">
								<template slot="title">
									<i class="el-icon-s-custom"></i>
									<span>员工管理</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="1-8" @click="staffadd">添加员工</el-menu-item>
									<el-menu-item index="1-9" @click="staffall">员工信息及修改</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
						</el-menu>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="rou">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
			}
		},
		created: function() {
			this.cs();
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
				
			},
			cs: function() {
				console.log(this.user);
			},
			vipadd: function() {
				this.$router.push({
					path: '/vipadd'
				})
			},
			vipall: function() {
				this.$router.push({
					path: '/vipall'
				})
			},
			staffadd: function() {
				this.$router.push({
					path: '/staffadd'
				})
			},
			staffall: function() {
				this.$router.push({
					path: '/staffall'
				})
			},
			addtype: function() {
				this.$router.push({
					path: '/addtype'
				})
			},
			adddish: function() {
				this.$router.push({
					path: '/adddish'
				})
			},
			table: function() {
				this.$router.push({
					path: '/table'
				})
			},
			updatekc: function() {
				this.$router.push({
					path: '/updatekc'
				})
			},
			diancan: function() {
				this.$router.push({
					path: '/diancan'
				})
			},
			updateprice: function() {
				this.$router.push({
					path: '/updateprice'
				})
			}
		},
		computed: {
			...mapState({
					user: state => state.users.userinfo
				}

			)
		}
	}
</script>

<style>
	.d {
		width: 230px;
		height: 880px;
		background-color: #545C64;
		float: left;
	}
	
	.rou {
		width: calc(100% - 250px);
		height: 875px;
		margin-top: 70px;
		border: solid black;
		background-color: gainsboro;
		float: left;
	}
</style>